<!DOCTYPE HTML>
<html>
<head>
    <title>加载海量点</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <style type="text/css">
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        #panel {
            position: absolute;
            top: 30px;
            left: 10px;
            z-index: 999;
            color: #fff;
        }

        #login {
            position: absolute;
            width: 300px;
            height: 40px;
            left: 50%;
            top: 50%;
            margin: -40px 0 0 -150px;
        }

        #login input[type=password] {
            width: 200px;
            height: 30px;
            padding: 3px;
            line-height: 30px;
            border: 1px solid #000;
        }

        #login input[type=submit] {
            width: 80px;
            height: 38px;
            display: inline-block;
            line-height: 38px;
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=wXeA5dg4Gy2jYGVLexRn2uhi7zoQbDTh"></script>
</head>
<body>
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">店铺名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" id="title" placeholder="请输入店铺名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属区域</label>
            <div class="layui-input-block">
                <select name="district" id="district" lay-search="">
                    <option value="">请选择所属区域</option>
                    {foreach $district as $key=>$vo}
                    <option value="{$vo.district}">{$vo.district}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属商圈</label>
            <div class="layui-input-block">
                <select name="businessDistrict" id="businessDistrict" lay-search="">
                    <option value="">请选择所属区域</option>
                    <option value="无商圈商家">无商圈商家</option>
                    {foreach $businessDistrict as $key=>$vo}
                    <option value="{$vo.businessDistrict}">{$vo.businessDistrict}</option>
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>
        <span id="paidiv"></span>
        <a class="layui-inline" style="float: right; cursor:pointer;" id="type">
        </a>


    </div>
</div>
<div id="map"></div>
<script src="/static/layuiadmin/layui/layui.js"></script>

<script type="text/javascript">
    let ranking = "{:url('query/ranking')}";
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'soulTable'], function () {
        var $ = layui.$, form = layui.form;
        //监听搜索
        var field = "";
        form.on('submit(LAY-user-back-search)', function (data) {
            var field = data.field;
            chushihua(field);
        });
        chushihua(field);

        function chushihua(field) {
            var map = new BMap.Map("map", {});                        // 创建Map实例
            map.centerAndZoom("安徽", 12);               // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom();            //启用滚轮放大缩小
            var geoc = new BMap.Geocoder();
            $.ajax({
                url: "{:url('query/distribution')}",
                data: field,
                type: "post",
                success: function (res) {
                    var html = "";
                    var str = "";
                    var paiming = "";
                    $('#type').empty();
                    $('#paidiv').empty();
                    html += "共有" + res.length + "店铺";
                    if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
                        var points = [];  // 添加海量点数据
                        for (var i = 0; i < res.length; i++) {
                            points.push(new BMap.Point(res[i].point_arr['lon'], res[i].point_arr['lat']));
                            if (res[i].businessDistrict != "暂无匹配") {
                                str += res[i].businessDistrict + ',';
                            }

                        }
                        var options = {
                            size: BMAP_POINT_SIZE_BIG, //BMAP_POINT_SIZE_SMALL
                            shape: BMAP_POINT_SHAPE_WATERDROP,
                            color: '#d340c3'
                        }
                        var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
                        paiming += "<a class=\"layui-inline\" style=\"float: right; cursor:pointer;\" name='paiming' id=\"paiming\">\n" +
                            "            店铺排名\n" +
                            "        </a>";
                        pointCollection.addEventListener('click', function (e) {
                            for (var i = 0; i < res.length; i++) {
                                points.push(new BMap.Point(res[i].point_arr['lon'], res[i].point_arr['lat']));
                                if (res[i].point_arr['lon'] == e.point.lng && res[i].point_arr['lat'] == e.point.lat) {
                                    break;
                                }
                            }
                            var point = new BMap.Point(e.point.lng, e.point.lat);
                            var marker = new BMap.Marker(point);
                            var opts = {
                                width: 250, // 信息窗口宽度
                                height: 100, // 信息窗口高度
                                // title: res[i].title, // 信息窗口标题
                                //enableMessage: false,// 设置允许信息窗发送短息
                            }
                            var Content = "<div>"//自定义的展示内容
                                + "<div><span style='margin:0 0 5px 0;padding:0.2em 0;color:#000'>" + res[i].title + "</span><div></br>"
                                + "<div><span style='margin:0 0 5px 0;padding:0.2em 0;color:#000'>类别：" + res[i].catPathKey + "</span><div></br>"
                                + "<p style='margin:0;line-height:1.5;font-size:12px;color:#000'>区域：" + res[i].district + "</p></br>"
                                + "<p style='margin:0;line-height:1.5;font-size:12px;color:#000'>商圈：" + res[i].businessDistrict + "</p></br>"
                                + "<p style='margin:0;line-height:1.5;font-size:12px;color:#000'>地址：" + res[i].address + "</p></br>"
                                + "<span style='margin:0;line-height:1.5;font-size:8px;text-indent:2em;color:#989898'>位置：" + e.point.lng + "," + e.point.lat + "</span>"
                                + "</div>";
                            var infoWindow = new BMap.InfoWindow(Content);  // 创建信息窗口对象
                            map.openInfoWindow(infoWindow, point); //开启信息窗口

                            // console.log(e);
                            // layer.msg('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
                        });
                        map.addOverlay(pointCollection);  // 添加Overlay
                    } else {
                        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
                    }
                    var lastIndex = str.lastIndexOf(',');
                    if (lastIndex > -1) {
                        str = str.substring(0, lastIndex) + str.substring(lastIndex + 1, str.length);
                    }
                    var str_arr = str.split(',');
                    var abc = $.unique(str_arr);
                    $('#type').prop('name', abc.join(","));
                    $('#type').append(html);
                    $('#paidiv').append(paiming);
                }
            });
        }

        $("#type").click(function () {
            var zhi = $(this).attr('name');
            layer.open({
                type: 1
                , skin: 'layui-layer-molv'
                , title: '所属商圈(内容已去重)'
                , content: "所属商圈:" + zhi
                , area: ['80%', '80%']
                , maxmin: true
            })
        });

        $(document).on("click", "a[name='paiming']", function (event) {
            var title = $('#title').val();
            var district = $('#district').val();
            var businessDistrict = $('#businessDistrict').val();
            var param = $.param({'title': title, 'district': district, 'businessDistrict': businessDistrict});
            layer.open({
                type: 2
                , skin: 'layui-layer-molv'
                , title: '排名'
                , content: ranking + '?' + param
                , area: ['80%', '80%']
                , maxmin: true
            })
        });
    });

</script>
</body>
</html>

